<template>
	<view>
		<view class="course-container" v-if="courseListData.length !== 0">
			<view class="course-margin" v-for="(item,index) in courseListData" :key="index">
				<view class="course-flex" @click="courseDetail(item)">
					<view class="cf-img">
						<img :src="item.images" alt=""
							style="width: 100%; height: 100%; border-radius: 18rpx;">
					</view>
					<view class="cf-right">
						<view class="fr-name">
							{{item.name}}
						</view>
						<view class="fr-age">
							学龄阶段：{{item.schoolAge}}
						</view>
					</view>
				</view>
		
			</view>
		</view>
		<view class="no-course" v-else>
			暂无课程~
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			courseListData:Array
		},
		data() {
			
			return {
				
			}
		},
		onLoad(){
		
		},
		methods: {
			courseDetail(item){
				console.log("11");
			uni.navigateTo({
					url: '/pages/course/courseDetail?id=' + item.id
				})	
			}
		}
	}
</script>

<style>
.course-container {
		width: 95%;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 30rpx;
		padding: 20rpx 20rpx;
	}

	.course-flex {
		display: flex;

	}

	.cf-img {
		width: 100rpx;
		height: 100rpx;
	}

	.course-margin {
		padding-bottom: 20rpx;
		padding-top: 20rpx;
		margin-left: 20rpx;
	}

	.cf-right {
		margin-left: 20rpx;
	}

	.fr-name {
		font-weight: bold;
	}

	.fr-age {
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #656565;
	}
	.no-course{
		text-align: center;
		padding: 50rpx;
		color: #7b7b7b;

	}
</style>
